<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Media Library</title>

	<!--
	<link rel="stylesheet" href="jquery.mobile-1.0.min.css" />
	<script src="jquery-1.6.4.min.js"></script>
	<script src="jquery.mobile-1.0.min.js"></script>
	<script src="jqm.page.params.js"></script>
	-->

	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
	<script type="text/javascript" src="https://raw.github.com/jblas/jquery-mobile-plugins/master/page-params/jqm.page.params.js"></script>


	<script>



var tgd = tgd || {};
tgd.MediaLibrary = tgd.MediaLibrary || {};
tgd.MediaLibrary.data = {
	User : "bob@gmail.com",
	Entries : [
		{ "UPC" : "000000001", "Title" : "Gladiator", "Thumburl" : "bob.jpg", "Owner" : "ralph.kelsey@gmail.com", Viewers : [], Contributors : ["bob@gmail.com"], Tags : ["DVD", "Movie"] },
		{ "UPC" : "000000001", "Title" : "What About Bob?", "Thumburl" : "bob.jpg", "Owner" : "vic.hanna@gmail.com", Viewers : ["bob@gmail.com"], Contributors : [], Tags : ["Blu-Ray", "Movie"] },
		{ "UPC" : "000000001", "Title" : "De Stijl", "Thumburl" : "bob.jpg", "Owner" : "bob@gmail.com", Viewers : [], Contributors : [], Tags : ["CD", "Music"] },
		{ "UPC" : "000000001", "Title" : "Hero", "Thumburl" : "bob.jpg", "Owner" : "bob@gmail.com", Viewers : [], Contributors : [], Tags : ["Blu-Ray", "Movie"] },
		{ "UPC" : "000000001", "Title" : "Halo", "Thumburl" : "bob.jpg", "Owner" : "bob@gmail.com", Viewers : [], Contributors : [], Tags : ["XBOX360", "Game"] },
		{ "UPC" : "000000001", "Title" : "E.T.", "Thumburl" : "bob.jpg", "Owner" : "bob@gmail.com", Viewers : [], Contributors : [], Tags : ["VHS", "Movie"] }
	]
};



/*
	tgd.MediaLibrary.data = {
		User ...,
		Entries ...,
		Accounts : [
			Name : email/username
			Tags : [
				{
					Title : tagname,
					Entries : array of references back to original entry object that has this tag and this user is owner of
				}
			]
			Entries : array of reference back to original entry object that this user is owner of
		]
	}
 */



(function() {
	//GET ACCOUNTS
	tgd.MediaLibrary.data.Accounts = new Array();

	tgd.MediaLibrary.data.Entries.forEach(function(entry) {
		if (!tgd.MediaLibrary.data.Accounts.some(function(element, index, array) { return element.Name === entry.Owner; })) {
			tgd.MediaLibrary.data.Accounts.push({ "Name" : entry.Owner, "Tags" : new Array(), "Entries" : new Array() });
		}
	});

	tgd.MediaLibrary.data.Accounts = tgd.MediaLibrary.data.Accounts.sort(function(a, b) { return a.Name.localeCompare(b.Name); });

	//GET TAGS
	tgd.MediaLibrary.data.Entries.forEach(function(entry) {
		tgd.MediaLibrary.data.Accounts.forEach(function(account) {
			if (account.Name === entry.Owner) {
				account.Entries.push(entry);
				entry.Tags.forEach(function(tag) {
					if (!account.Tags.some(function(element, index, array) { return element.Title === tag; })) {
						account.Tags.push({ "Title" : tag, "Entries" : new Array() });
					}

					for (var i = 0; i < account.Tags.length; ++i) {
						if (account.Tags[i].Title === tag) {
							account.Tags[i].Entries.push(entry);
							break;
						}
					}
				});
			}
		});
	});

	tgd.MediaLibrary.data.Accounts.forEach(function(account) {
		account.Tags = account.Tags.sort(function(a, b) { return a.Title.localeCompare(b.Title); });
	});

	//TODO: the entries may need sorted.

})();


/*
 * http://stackoverflow.com/questions/8238762/passing-parameters-to-a-page-id-in-jquery-mobile
 */
$(document).bind("pagebeforechange", function( event, data ) {
    $.mobile.pageData = (data && data.options && data.options.pageData)
        ? data.options.pageData
        : null;
});



$("#accounts").live("pageinit", function(event) {
	for (var aid = 0; aid < tgd.MediaLibrary.data.Accounts.length; ++aid) {
		$("#lvAccountList").append('<li><a href="#tags?aid=' + aid + '">' + tgd.MediaLibrary.data.Accounts[aid].Name + '</a></li>');
	}

	$("#lvAccountList").listview("refresh");
});



$("#tags").live("pagebeforeshow", function(e, data) {
    var aid = parseInt($.mobile.pageData.aid);
    $("#tags h1").text(tgd.MediaLibrary.data.Accounts[aid].Name);

    $("#lvTags").empty();

	//TODO: make enum with special tids.
	$("#lvTags").append('<li><a href="#items?aid=' + aid + '&tid=all">All <span class="ui-li-count">' + tgd.MediaLibrary.data.Accounts[aid].Entries.length + '</span></a></li>');
	$("#lvTags").append('<li><a href="#items?aid=' + aid + '&tid=untagged">Untagged <span class="ui-li-count">' + 9999 + '</span></a></li>');
	$("#lvTags").append('<li><a href="#items?aid=' + aid + '&tid=uncategorized">Uncategorized <span class="ui-li-count">' + 9999 + '</span></a></li>');

	for (var tid = 0; tid < tgd.MediaLibrary.data.Accounts[aid].Tags.length; ++tid) {
		var tag = tgd.MediaLibrary.data.Accounts[aid].Tags[tid];
		$("#lvTags").append('<li><a href="#items?aid=' + aid + '&tid=' + tid + '">' + tag.Title + '<span class="ui-li-count">' + tag.Entries.length + '</span></a></li>');
	}

	$("#lvTags").listview("refresh");
});



$("#items").live("pagebeforeshow", function(e, data) {
	$("#lvItems").empty();
	var aid = parseInt($.mobile.pageData.aid);

	if ($.mobile.pageData.tid.match(/all|untagged|uncategorized/) === null) {
		var tid = parseInt($.mobile.pageData.tid);

		$("#items h1").text(tgd.MediaLibrary.data.Accounts[aid].Tags[tid].Title);

		for (var eid = 0; eid < tgd.MediaLibrary.data.Accounts[aid].Tags[tid].Entries.length; ++eid) {
			var entry = tgd.MediaLibrary.data.Accounts[aid].Tags[tid].Entries[eid];
			$("#lvItems").append('<li><a href="#entry?aid=' + aid + '&tid=' + tid + '&eid=' + eid + '"><img src="' + entry.Thumburl + '" height="100" /><h3>' + entry.Title + '</h3><p>' + entry.Tags.join(", ") + '</p></a></li>');
		}
	} else if ($.mobile.pageData.tid === "all") {
		$("#items h1").text("All");

		tgd.MediaLibrary.data.Accounts[aid].Entries.forEach(function(entry) {
			$("#lvItems").append('<li><a href="#entry?aid=' + aid + '&eid=' + eid + '"><img src="' + entry.Thumburl + '" height="100" /><h3>' + entry.Title + '</h3><p>' + entry.Tags.join(", ") + '</p></a></li>');
		});
	}

	//TODO: untagged & uncategorized

	$("#lvItems").listview("refresh");
});



$("#scan").live("pageinit", function(event) {
	for (var i = 0; i < tgd.MediaLibrary.data.Accounts.length; ++i) {
		$("#ddlAccountList").append('<option value="' + i + '">' + tgd.MediaLibrary.data.Accounts[i].Name + '</option>');
	}

	$("#ddlAccountList").selectmenu("refresh");

	$("#ddlAccountList").bind("change", function(event) {
		$("#fsChecks").empty();

		var id = $("#ddlAccountList").val();

		for (var i = 0; i < tgd.MediaLibrary.data.Accounts[id].Tags.length; ++i) {
			var tagName = tgd.MediaLibrary.data.Accounts[id].Tags[i].Title
			$("#fsChecks").append('<input type="checkbox" name="' + tagName + '" id="' + tagName + '" class="custom" />', '<label for="' + tagName + '">' + tagName + '</label>');
		}

		$("#fsChecks").trigger("create");
	});
});



	</script>
</head>


<body>



<div data-role="page" id="accounts">
	<div data-role="header">
		<a href="#scan" data-icon="gear">Scan</a>
		<h1>Libraries</h1>
		<a href="#" data-icon="refresh" class="ui-btn-right" onclick="$.mobile.showPageLoadingMsg();">Refresh</a>
	</div>
	<div data-role="content">
		<ul id="lvAccountList" data-role="listview">
		</ul>
	</div>
</div>



<div data-role="page" id="tags" data-add-back-btn="true">
	<div data-role="header">
		<h1></h1>
	</div>
	<div data-role="content">
		<!--<ul id="lvStandardTags" data-role="listview">
			<li><a href="#items?id=1">All <span class="ui-li-count">12</span></a></li>
			<li><a href="#items?id=2">Untagged <span class="ui-li-count">0</span></a></li>
			<li><a href="#items?id=3">Uncategorized <span class="ui-li-count">5</span></a></li>
		</ul>-->
		<ul id="lvTags" data-role="listview">
		</ul>
	</div>
</div>



<div data-role="page" id="items" data-add-back-btn="true">
	<div data-role="header">
		<h1></h1>
	</div>
	<div data-role="content">
		<ul id="lvItems" data-role="listview">
		</ul>
	</div>
</div>



<!-- Start of page: #entry -->
<div data-role="page" id="entry" data-add-back-btn="true">

	<div data-role="header">
		<h1>Gladiator</h1>
		<a href="#edit" data-icon="gear" class="ui-btn-right">Edit</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="ui-grid-a">
			<div class="ui-block-a">
				<img src="bob.jpg" height="100" />
			</div>
			<div class="ui-block-b">
				<span>UPC:</span><span>9029375738</span>
			</div>
		</div>
		<div data-role="fieldcontain">
			<fieldset data-role="controlgroup">
				<legend>Tags</legend>
				<input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" />
				<label for="checkbox-1a">Blu-rays</label>

				<input type="checkbox" name="checkbox-6a" id="checkbox-6a" class="custom" />
				<label for="checkbox-6a">Cool</label>

				<input type="checkbox" name="checkbox-5a" id="checkbox-5a" class="custom" />
				<label for="checkbox-5a">Favorite</label>

				<input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" />
				<label for="checkbox-4a">Funny</label>

				<input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" />
				<label for="checkbox-2a">Movies</label>

				<input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" />
				<label for="checkbox-3a">Sad</label>
		    </fieldset>
		</div>
		<div data-role="fieldcontain">
			<button type="button" data-theme="b">Save</button>
		</div>
	</div>
</div><!-- /entry -->


<!-- Start of page: #edit -->
<div data-role="page" id="edit" data-add-back-btn="true">

	<div data-role="header">
		<h1>Edit Title</h1>
	</div><!-- /header -->

	<div data-role="content">
		<label for="txtTitle">New Title:</label>
    	<input type="text" name="name" id="txtTitle" value="Gladiator" />

		<div data-role="fieldcontain">
			<button type="button" data-theme="b">Save</button>
		</div>
	</div>
</div><!-- /page -->



<!-- Start of page: #scan -->
<div data-role="page" id="scan" data-add-back-btn="true">
	<div data-role="header">
		<h1>Scan New Media</h1>
	</div><!-- /header -->

	<div data-role="content">

		<div data-role="fieldcontain">
			<select id="ddlAccountList" data-native-menu="false">
				<option>Choose an account</option>

				<!--<option value="1">My Stuff</option>
				<option value="2">ralph.kelsey@gmail.com</option>
				<option value="3">vic.hanna@gmail.com</option>-->
			</select>
		</div>

		<div data-role="fieldcontain">
			<fieldset id="fsChecks" data-role="controlgroup">
				<!--<input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" />
				<label for="checkbox-1a">Blu-rays</label>

				<input type="checkbox" name="checkbox-6a" id="checkbox-6a" class="custom" />
				<label for="checkbox-6a">Cool</label>

				<input type="checkbox" name="checkbox-5a" id="checkbox-5a" class="custom" />
				<label for="checkbox-5a">Favorite</label>

				<input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" />
				<label for="checkbox-4a">Funny</label>

				<input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" />
				<label for="checkbox-2a">Movies</label>

				<input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" />
				<label for="checkbox-3a">Sad</label>-->
		    </fieldset>
		</div>

		<div data-role="fieldcontain">
			<label for="slider2">Fast Scan:</label>
			<select name="slider2" id="slider2" data-role="slider">
				<option value="off">Off</option>
				<option value="on" selected="selected">On</option>
			</select>
		</div>

		<a href="#" data-role="button">Scan</a>

	</div>
</div><!-- /page -->


</body>
</html>